<template>
  <div>
    <layout-main>
      <template v-slot:left>
        <echart-main class="echartMain">
          <template v-slot:title> 三务公开 </template>
          <template v-slot:echart>
            <div class="echatTab">
              <div class="selectTab">党务</div>
              <div>政务</div>
              <div>财务</div>
            </div>
            <div class="echatTabMain">
              <div class="echatTabMainLi echartshow"></div>
              <div class="echatTabMainLi"></div>
              <div class="echatTabMainLi"></div>
            </div>
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template v-slot:title> 本村人口信息 </template>
          <template v-slot:echart>
            <div class="rk_tops">
              <div class="rk_top">
                <echart :options="options1" />
              </div>
              <div class="rk_top">
                <echart :options="options2" />
              </div>
            </div>
            <div class="rk_tops">
              <echart :options="options3" />
            </div>
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template v-slot:title> 本村集体经济增长情况 </template>
          <template v-slot:echart>
            <echart :options="options4" />
          </template>
        </echart-main>
      </template>
      <template v-slot:right>
        <echart-main class="echartMain">
          <template v-slot:title> 党政建设 </template>
          <template v-slot:echart>
            <div class="middle-right-box">
              <ul id="dy">
                <img
                  src="~assets/img/sy/dz-mark.png"
                  alt="党政建设"
                  class="dz-mark"
                />
                <li>
                  <div class="dz-num">${val.shu}</div>
                  <span>${val.name}</span>
                </li>
                <li>
                  <div class="dz-num">${val.shu}</div>
                  <span>${val.name}</span>
                </li>
                <li>
                  <div class="dz-num">${val.shu}</div>
                  <span>${val.name}</span>
                </li>
                <li>
                  <div class="dz-num">${val.shu}</div>
                  <span>${val.name}</span>
                </li>
              </ul>
            </div>
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template v-slot:title> 土地概况 </template>
          <template v-slot:echart>
            <echart :options="options5" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template v-slot:title> 产业经济占比 </template>
          <template v-slot:echart>
            <echart :options="options6" />
          </template>
        </echart-main>
      </template>
      <template v-slot:bottom>
        <echart-main>
          <template v-slot:title> 房屋概况 </template>
          <template v-slot:echart>
            <echart :options="options7" />
          </template>
        </echart-main>
        <echart-main>
          <template v-slot:title> 能源数据 </template>
          <template v-slot:echart>
            <echart :options="options8" />
          </template>
        </echart-main>
      </template>
    </layout-main>
  </div>
</template>

<script>
import EchartMain from "components/content/echartMain/EchartMain.vue";
import LayoutMain from "components/content/layoutMain/LayoutMain.vue";
import Echart from "components/common/echart/Echart.vue";

import {
  echarts1,
  echarts2,
  echarts3,
  echarts4,
  echarts5,
  echarts6,
  echarts7,
  echarts8,
} from "./echartjs/echarts-nc";

export default {
  components: { LayoutMain, EchartMain, Echart },
  data() {
    return {
      swMain: null,
      options1: null,
      options2: null,
      options3: null,
      options4: null,
      options5: null,
      options6: null,
      options7: null,
      options8: null,
    };
  },
  props: {
    indexUnit: {
      type: Object,
      default: {},
    },
  },
  created() {
    this.options1 = echarts1(20);
    this.options2 = echarts2(20);
    this.options3 = echarts3([1,2],[1,2]);
    this.options4 = echarts4([1,2],[1,2]);
    this.options5 = echarts5([{name:1,value:1}]);
    this.options6 = echarts6([{name:1,value:1}]);
    this.options7 = echarts7([{name:1,value:1}]);
    this.options8 = echarts8([1],[1],[1]);
  },
  methods: {
    dangjian() {},
  },
};
</script>

<style lang="scss" scoped>
.echartMain {
  height: 33.3%;
}
.rk_tops {
  height: 50%;
  width: 100%;
  display: flex;

  .rk_top {
    width: 50%;
    height: 100%;
  }
}
.middle-right-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  ul {
    position: relative;
    width: 80%;
    height: 85%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;

    .dz-mark {
      width: 60px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    li {
      width: 48%;
      height: 50px;
      color: #00f0ff;
      font-size: 14px;
      background: rgba(0, 54, 255, 0.2);
      border: 1px solid #022ece;
      margin: 10px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .dz-num {
      font-size: 26px;
      font-family: "shuzi";
    }
  }
}
.echatTab {
  display: flex;
  justify-content: space-around;
  margin-top: 0.125rem;
  div {
    font-size: 0.175rem;
    cursor: pointer;
  }
  .selectTab {
    color: #48ece7;
  }
}
.echatTabMain {
  height: calc(100% - 0.375rem);
  overflow: auto;
  .echatTabMainLi {
    height: 100%;
    display: none;
    p {
      margin: 0;
      padding: 0.0625rem 0;
    }
  }
  .echartshow {
    display: block;
  }
}
</style>